<template>
  <view class="home-page">
    <!-- 顶部问候 -->
    <view class="header">
      <view class="greeting">
        <view class="title">下午好!</view>
        <view class="subtitle">Good afternoon!</view>
        <view class="username">鱼尾狐先生</view>
      </view>
      <view class="shield">
        <image src="../../../assets/shield.png" mode="widthFix" alt="shield" />
      </view>
    </view>

    <!-- 账户余额卡片 -->
    <view class="balance-card">
      <view class="balance-info">
        <text>账户余额</text>
        <text class="eye">👁️</text>
      </view>
      <view class="balance-amount">2345.00</view>
      <view class="recharge">立即充值 &gt;</view>
    </view>

    <!-- 扫码付款 -->
    <view class="scan-pay">
      <view class="scan-pay-item" @click="scanCode()">
        <image class="scan-icon" src="../../../assets/scan.png" mode="widthFix" />
        <text>付款码</text>
      </view>
      <view class="scan-pay-item" @click="scanPay()">
        <image class="scan-icon" src="../../../assets/qrcode.png" mode="widthFix" />
        <text>扫码</text>
      </view>
    </view>


    <!-- 交易记录 -->
    <view class="records-header">
      <text>交易记录</text>
      <text class="eye">👁️</text>
      <text class="all-records">全部记录</text>
    </view>
    <view class="records-list">
      <view class="record-item" v-for="i in 3" :key="i">
        <image class="logo" src="../../../assets/walmart.png" mode="aspectFill" alt="walmart" />
        <view class="record-info">
          <view class="store">沃尔玛超市（平安路店）</view>
          <view class="datetime">2023-10-03 18:10:23</view>
        </view>
        <view class="amount">-¥283.00</view>
      </view>
    </view>
	<!-- <view class="records-list">
	  <view class="record-item" wx:for="{{records}}" wx:key="id">
	    <image class="logo" src="{{records.img}}" alt="walmart" />
	    <view class="record-info">
	      <view class="store">{{records.store}}</view>
	      <view class="datetime">{{records.datatime}}</view>
	    </view>
	    <view class="amount">{{{{records.amount}}}}</view>
	  </view>
	</view> -->
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getPayRecords } from '../../utils/api'

const records = ref({})



// 页面加载时调用
onMounted(() => {
	const payRecordParams={
		orderNo:240142013249786,
		enterpriseId:'f29f31263047463a87222afa6f4a618a'
	}
	getPayRecords(payRecordParams).then(res=>{
		console.log(res)
		const payRecord = res.payRecord
		const enterprise = res.enterprise
		console.log(payRecord)
		// 存储消费金额用于扫码
		const salesAmount = payRecord.salesAmount
		if(salesAmount){
			uni.setStorageSync('salesAmount',salesAmount)
		}else{
			uni.setStorageSync('salesAmount',0)
		}
		
		console.log(res.enterprise)
		/**
		 * 判断支付状态是不是'S:成功''
		 * logoUrl:商家图片
		 * storeName：企业门店名称
		 * payTime：支付时间
		 * actualSales：实际付款金额
		 */
		if(payRecord.status = 'S'){
			records.value = {
				logoUrl: enterprise.logoUrl,
				storeName: enterprise.storeName,
				payTime: payRecord.payTime,
				actualSales: payRecord.actualSales
			}
			console.log("records为：",records.value)	
		}
	})
})

function scanPay(){
	uni.navigateTo({
	    url: '/pages/C/home/pay' // 替换为你的目标页面路径
	});
}
function scanCode(){
	uni.navigateTo({
	    url: '/pages/C/home/scan' // 替换为你的目标页面路径
	});
}
</script>

<style src="./index.css" scoped></style>